<template>
    <div>       
        <!-- 
            面包屑导航区
            注意：
                下方面包屑导航不能跳转到 /users 可能的原因是此时导航本身就已经是 /users
        -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>



        <!-- 卡片视图区 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-button 
                        type="primary" 
                        @click="showAddCateDialog"
                    >添加分类</el-button>
                </el-col>
            </el-row>



            <!-- 表格
                :data：表示的是数据源
            -->
            <tree-table 
                class="treeTable"
                :data="catelist"
                :columns="columns"
                :show-row-hover="false"
                :selection-type="false"
                :expand-type="false"
                :show-index="true"
                index-text="#"
                border
            >
                <!-- 是否有效模版区（插槽区） -->
                <template slot="isok" slot-scope="scope">                    
                    <i 
                        class="el-icon-success" 
                        v-if="scope.row.cat_deleted === false"
                        style="color: lightseagreen"
                    ></i>
                    <i 
                        class="el-icon-error" 
                        v-else style="color: red"
                    ></i>
                </template>

                <!-- 排序模版区（插槽区） -->
                <template slot="order" slot-scope="scope">                    
                    <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag size="mini" type="warning" v-else-if="scope.row.cat_level === 2">三级</el-tag>
                </template>

                <!-- 操作模版区（插槽区） -->
                <template slot="opt" slot-scope="scope">                    
                    <el-button
                        type="primary"
                        icon='el-icon-edit'
                        size="mini"
                    >编辑</el-button>
                    <el-button
                        type="danger"
                        icon='el-icon-delete'
                        size="mini"
                    >删除</el-button>
                </template>

            </tree-table>



            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>


        <!-- 添加按钮的对话框（模态框） -->
        <el-dialog
            title="添加分类"
            :visible.sync="addCateDialogVisible"
            width="50%" 
            :append-to-body="true"  
            @close="addCateDialogClosed"            
        >
            <!-- 内容主体区 -->
            <div>                
                <el-form 
                    :model="addCateForm" 
                    :rules="addCateFormRules"
                    ref="addCateFormRef"
                    label-width="90px"  
                >
                    <el-form-item label="分类名称" prop="cat_name">
                        <el-input v-model="addCateForm.cat_name"></el-input>
                    </el-form-item>

                    <!-- 父级分类：
                        options 用来指定数据源 parentCateList
                        props 指定选择器配置属性
                    -->
                    <el-form-item label="父级分类">
                        <el-cascader                            
                            :options="parentCateList"  
                            :props="cascaderProps"
                            v-model="selectedKeys"                      
                            clearable   
                            change-on-select="true"
                            @change="parentCateChanged"
                        >
                        </el-cascader>
                    </el-form-item>                    
                </el-form>                                
            </div>

            <!-- 底部按钮区 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>            
        </el-dialog>


    </div>
</template>

<script>
export default {
    data() {
        return {
            // 查询条件：分类、分页
            queryInfo: {
                type: 2,
                pagename: 1,
                pagesize: 5,  
            },



            // ???????????下面出现问题



            qInfo: {

            },




            // 商品分类的数据列表，默认为空，初始化数据列表
            catelist: [],
            total:0,    


            // 为组件 table 指定列参数,具体的值可以看官网
            columns: [
                {
                    label: '分类名称',
                    prop: 'cat_name'
                },
                {
                    label: '是否有效',
                    // 表示，当强列定义为模版列（也就是插槽）,他会根据当前设定，去组件中找是否存在相关变量数据
                    type: 'template',
                    // 表示当前这一列使用模版名称
                    template: 'isok'
                },
                {
                    label: '排序',
                    // 表示，当强列定义为模版列（也就是插槽）,他会根据当前设定，去组件中找是否存在相关变量数据
                    type: 'template',
                    // 表示当前这一列使用模版名称
                    template: 'order'
                },
                {
                    label: '操作',
                    // 表示，当强列定义为模版列（也就是插槽）,他会根据当前设定，去组件中找是否存在相关变量数据
                    type: 'template',
                    // 表示当前这一列使用模版名称
                    template: 'opt'
                }
            ],

            // 添加按钮的模态框的显示与隐藏
            addCateDialogVisible: false,


            // 添加分类的表单数据对象 
            addCateForm: {
                cat_name: '',       //  添加分类的名称
                cat_pid: 0,         // 父级分类的ID
                cat_level: 0,       // 当前分类层级 0：一级，1：二级，2：三级
            },
            // 分类的表单数据的校验规则
            addCateFormRules: {
                cat_name:[
                    { required: true, message: '请输入分类名称', trigger: 'blur' },                
                ],
            },


            // 父级分类的列表
            parentCateList: [],
            // 指定父级分类中 cascader 中 props 的的级联选择器的配置属性
            cascaderProps: {
                expandTrigger: 'hover',
                value: 'cat_id',
                label: 'cat_name',
                children:'children',
            },
            // 选中的父级分类的ID数组
            selectedKeys:[],
        }
    },

    created() {        
        this.getCateList()
    },

    methods: {
        // API 请求：请求商品分类数据
        async getCateList() {
            const { data: res } = await this.$http.get('categories', {
                params: this.queryInfo
                // params: {
                //     type: 2,
                //     pagename: 1,
                //     pagesize: 5, 
                // }
            })

            if (res.meta.status !== 200) {
                return this.$message.error('获取商品分类失败！')
            }

            this.catelist = res.data
            // this.catelist = res.data.result     // 商品数据列表赋值
            // this.total = res.data.total         // 总数据条数赋值

            console.log('所有的数据',res);       //ceshi            
            // console.log('商品数据列表',this.catelist);  //ceshi
            // console.log('总数据',this.total);   //ceshi
        },


        // 分页，监听 pagesize 改变
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize
            this.getCateList()
        },
        // 分页，监听 pagenum 改变
        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage
            this.getCateList()
        },


        // 控制按钮展示
        showAddCateDialog() {
            // 调用下方 获取父类分类的请求
            this.getParentCateList()        
            this.addCateDialogVisible = true                
        },


        // API请求 获取父级分类的数据列表
        async getParentCateList() {
            const { data:res } = await this.$http.get('categories', {
                params: {
                    type:2,
                }
            })

            if (res.meta.status !== 200) {
                return this.$message.error('获取失败！')                
            }

            this.parentCateList = res.data
            // console.log('请求的数据',res);      //ceshi
            // console.log('父级列表',this.parentCateList);      //ceshi
        },


        // 表单的选择项发生了变化就触发，确定 添加的分层信息
        parentCateChanged() {
            // console.log(this.selectedKeys);     // ceshi
            // console.log('长度',this.selectedKeys.length);     // ceshi

            // 如果 selectedkeys 数组中的 length 大于 0，证明选中的父级分类，反之，就说明没有选中任何父级分类            
            if (this.selectedKeys.length > 0) {   

                // 父级分类的ID
                this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]                 

                // 为当前分类的等级赋值
                this.addCateForm.cat_level = this.selectedKeys.length

                return      
            } else {                
                // 父级分类的ID
                this.addCateForm.cat_pid = 0

                // 为当前分类的等级赋值
                this.addCateForm.cat_level = 0
            }
        },



        // 添加新的分类
        addCate() {



            // 备注：此处打印出结果为 空 是正常现象，因为在下方中的 addCateDialogClosed 中将相关信息都置空了。所以此处打印为空
            // console.log(this.addCateForm);      //ceshi

            // 备注：下方打印与上方存在冲突，打印存在数据的原因可能是因为，上方执行的是模态框点击进入时所指定的 addCateForm 列表，而下方打印的是数据填入后，提交前的 addCateForm 中的数据的值。所以上下打印的结果存在出入的原因可能在这里
            // console.log(this.addCateForm.cat_name);      //ceshi
            // console.log(this.addCateForm.cat_pid);      //ceshi
            // console.log(this.addCateForm.cat_level);      //ceshi
            


            // 发送请求前先做预校验
            this.$refs.addCateFormRef.validate(async valid => {
                if (!valid) return

                const { data: res } = await this.$http.post('categories', this.addCateForm)

                if (res.meta.status !== 201) {
                    return this.$message.error('添加失败！')                
                }
                this.$message.success('添加成功！')                 

                this.getCateList()                
                // console.log('分类',res);        // ceshi             
            })       

            this.addCateDialogVisible = false
        }, 



        // 监听模态框关闭触发事件，重置表当数据（重置数据就需要使用到 ref 对象引用）
        addCateDialogClosed() {
            // 重置输入的表单数据
            this.$refs.addCateFormRef.resetFields()
            // 重置选项框中的表单数据
            this.selectedKeys = []            
            this.addCateForm.cat_pid = 0
            this.addCateForm.cat_level = 0
        },
    },
}
</script>

<style lang="less" scoped>
.treeTable {
    margin-top: 15px;
}
</style>